<script setup lang="ts">
import router from '@/router'
import { useChannelStore } from '@/store/channel'
import type { ArticleItem, ArticleResData } from '@/type/data'
import axios from 'axios'
import { ref, watch } from 'vue'
const store = useChannelStore()
const articles = ref<ArticleItem[]>([]);
watch(()=>store.selected,
  async()=>{
  const res=await axios.get<ArticleResData>(
    `http://geek.itheima.net/v1_0/articles`,
  {
    params:{
      channel_id:store.selected,
      timestamp:Date.now()
    }
  })
  articles.value = res.data.data.results;
},
{immediate:true}
  )
  const toDetail=(id:string)=>{
    router.push('/detail/'+id)
  }
</script>

<template>
  <div class="article-list">
    <div class="article-item" @click="toDetail(item.art_id)" v-for="item in articles" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <template v-if="item.cover.type>0">    
         <img v-for="(src,index) in item.cover.images" :key="index" :src="src" alt="" class="img">
      </template>
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>